import React, { Component } from "react"
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import { Flex, WhiteSpace } from 'antd-mobile';
import "./tab.css"

import Sidebar from "../components/sidebar"
import Mender from "../components/menber";
import Login from "../components/menber/login";
import Find from "../components/find/find";
import fangdajing from "../assets/search.png"
import Discovery from "../components/search/search";


import fangdajing from "../assets/search.png"


class Tab extends Component {
    constructor() {
        super()
        this.state = {
            flag: false,
        }
    }

    goSidebar() {
        this.setState({
            flag: !this.state.flag
        })
    }

    change(flag) {
        this.setState({
            flag: flag
        })
    }
 
   
    render() {
        let { flag, item } = this.state
        return (
         
                <div >
                    <Flex justify="between">

                        <Flex.Item className="content-png"
                            onClick={this.goSidebar.bind(this)}
                        >
                        </Flex.Item>
                        <Flex.Item className="content"><Link to="/home">我的</Link></Flex.Item>
                        <Flex.Item className="content">
                            <Link to="/find">发现</Link>
                            <Route path='/find' component={Discovery} />
                        </Flex.Item>
                        <Flex.Item className="content"><Link to="/movice">视频</Link></Flex.Item>
                        <Flex.Item >
                            <Link to="/auto-search">
                                <img src={fangdajing} className="content-search" />
                            </Link>
                        </Flex.Item>

                    </Flex>
                    <WhiteSpace size="lg" />
                    {/* 点击跳转到登录选项页 */}
                    <Link to="/menber"></Link>
                    <Route path="/menber" component={Mender} />
                    {/* 登录页面 */}
                    <Link to="/login"></Link>
                    <Route path="/login" component={Login} />
                    {/* 搜索页面 */}
                    <Route path="/auto-search" component={Find} />
                    {/* 侧边栏点击显示隐藏 */}
                    <div className={flag ? 'reveal' : 'conceal'}>
                        <Sidebar method={this.change.bind(this)} />
                    </div>
                </div>
       
        )
    }
}

export default Tab 
